<template>
    <div id="">
      <h4>添加车辆信息</h4>
      <div class="divinp">
        <div class="inp">
          <span>购买时间：</span><input type="date"  v-model="gotime">
        </div>
        <div class="inp">
          <span>品牌：</span><input type="text"  v-model="gopinp">
        </div>
        <div class="inp">
          <span>车牌号：</span><input type="text" v-model="gotchehao">
        </div>
        <div class="inp">
          <span>车辆类型：</span>
          <select v-model="gottype">
            <option value="小轿车">小轿车</option>
            <option value="大客车">大客车</option>
            <option value="大卡车">大卡车</option>
            <option itany="itany" value="">请选择车辆类型</option>
          </select>
        </div>
        <div class="inp">
          <span>总里程：</span><input type="text"  v-model="gotli">
        </div>
        <div class="inp">
          <span>油耗：</span><input type="text"  v-model="gotyouhao">
        </div>
        <div class="inp">
          <span>基本费用：</span><input type="text"  v-model="gofyong">
        </div>
        <div class="inp">
          <span>养路费：</span><input type="text"  v-model="goyanglu">
        </div>
        <div class="inp">
          <span>总费用：</span><input type="text"  v-model="gozongf">
        </div>
        <div class="inp" :class="this.gottype!='大客车'?classType:Classtt">
          <span>核载人数：</span><input type="text"  v-model="gorshu">
        </div>
        <div class="inp" :class="this.gottype!='小轿车'?classType:Classtt">
          <span>箱数：</span><input type="text"  v-model="goxiang">
        </div>
        <div class="inp" :class="this.gottype!='大卡车'?classType:Classtt">
          <span>载重量：</span><input type="text"  v-model="gozhong">
        </div>
      </div>
      <div>
        <button @click="chegai">确认添加</button>
        <button @click="chongxi">重新输入</button>
      </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    //import  { Toast } from '../../../static/mint_ui/toast/style.css'
    export default {
        name: "add_vehicle",
      data(){
          return{
            classType:'types',
            Classtt:"type",
            xius:'',
            //添加车辆信息
            gotime:"",//改时间
            gotchehao:'',//改车牌号
            gottype:'', //改车辆类型
            gotli:"",//改总里程
            gotyouhao:'',//改油耗
            gofyong:"",//改基本费用
            goyanglu:"",//改养路费
            gozongf:"",//改总费用
            gorshu:"",//改核载人数
            goxiang:"",//改箱数
            gozhong:"",//改载重量
            gopinp:""//该品牌

          }
      },
      created(){
      },
      methods:{
          //添加数据
        chegai:function () {
          //检测不能为空的属性
          if(this.gotchehao == ''){
            Toast('请输入车牌号！');
            /*Toast({  //mint-ui 提示
              message: '车牌号不能为空！',
              position: 'bottom',
              duration: 5000
            });*/
            return;
          }

          /*//发送数据
            var url=""; //展无api接口
            var content = {"serial_number":"002", "manufacturing_company":this.gopinp, "license_plate_number":this.gotchehao, "purchasing_data":this.gotime, "model_of_car":this.gottype,
              "the_total":this.gotli, "fuel_consumption":this.gotyouhao,
              "basic_maintenance_cost":this.gofyong, "road_toll":this.goyanglu,
              "cumulative_total_cost":this.gozongf, "busload":this.gorshu,
              "carton_numbers":this.goxiang, "load_capacity":this.gozhong};
            this.$http.post(url,{content:content},{emulateJSON:true}).then(function (response) {
              Toast({  //mint-ui 提示
                message: '修改成功',
                position: 'bottom',
                duration: 5000
              });
              //重新刷新数据
              this.getchusi();
              //发布后 清空文本框
              this.gotime = "";
              this.gotchehao = "";
              this.gottype = "";
              this.gotli = "";
              this.gotyouhao = "";
              this.gofyong = "";
              this.goyanglu = "";
              this.gorshu = "";
              this.gozongf = "";
              this.goxiang = "";
              this.gozhong = "";
              this.gopinp = "";
            })
*/        },
        //清空input
        chongxi:function () {
          this.gotime = "";
          this.gotchehao = "";
          this.gottype = "";
          this.gotli = "";
          this.gotyouhao = "";
          this.gofyong = "";
          this.goyanglu = "";
          this.gorshu = "";
          this.gozongf = "";
          this.goxiang = "";
          this.gozhong = "";
          this.gopinp = "";
        }
      }
    }
</script>

<style scoped>
  .divinp{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .inp span{display: inline-block;vertical-align: middle;font-size: 16px}
  .inp input,.inp select{
    font-size: 16px;
    padding: 0 5px;
    width: 50%;
    height: 24px;
    display: inline-block;
  }


  .divinp>div.inp{width: 48%;}
  .divinp>div.inp span{
    font-size: 12px;
    text-align: right;
    min-width: 60px;
  }
  .divinp>div.inp>input,.inp select{height: 20px;margin-bottom: 5px}
</style>
